<template>
  <div>
    <div>
      <n-page-header class="header" title="商品列表">
        <template #header>
          <n-breadcrumb class="breadcrumb">
            <n-breadcrumb-item>商品管理</n-breadcrumb-item>
            <n-breadcrumb-item>商品列表</n-breadcrumb-item>
          </n-breadcrumb>
        </template>
      </n-page-header>
      <main>
        <n-card class="list__tablelist">
          <n-data-table :columns="columns" :data="dataSource"> </n-data-table>
        </n-card>
      </main>
    </div>
  </div>
</template>
<script lang="ts">
// Naive
import { Component, h, computed, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NPageHeader,
  NCard,
  NDataTable,
  NTag,
  NButton,
} from "naive-ui";

/**
 * columns
 * dataSource
 */
// 数据格式
const columns = reactive([
  {
    title: "商品编号",
    key: "goodsNo",
  },
  {
    title: "商品名称",
    key: "goodsName",
  },
  {
    title: "商品条码",
    key: "goodsCode",
  },
  {
    title: "单价",
    key: "price",
    render(row) {
      let price = row.price.toFixed(2);
      return price;
    },
  },
  {
    title: "数量（件）",
    key: "counts",
  },
  {
    title: "上架状态",
    key: "state",
    render(row) {
      let tagType = "";
      if (row.state[0] === "已下架") {
        tagType = "";
      } else {
        tagType = "info";
      }
      const state = row.state.map((tagKey: string) => {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: tagType,
          },
          {
            default: () => tagKey,
          }
        );
      });

      return state;
    },
  },
  {
    title: "金额",
    key: "total",
    render(row) {
      let price = row.price.toFixed(2);
      return price;
    },
  },
  // 按钮部分
  {
    title: "操作",
    key: "operation",
    render(row) {
      return h(
        NButton,
        {
          size: "small",
          onClick: () => {
            if (row.state[0] === "已上架") {
              row.state[0] = "已下架";
            } else {
              row.state[0] = "已上架";
            }
          },
        },
        {
          default: () => {
            if (row.state[0] === "已上架") {
              return "下架";
            } else {
              return "上架";
            }
          },
        }
      );
    },
  },
  {
    title: "",
    key: "operation",
    render(row) {
      return h(
        NButton,
        {
          size: "small",
          onClick: () => {},
        },
        { default: () => "编辑" }
      );
    },
  },
  {
    title: "",
    key: "operation",
    render(row) {
      return h(
        NButton,
        {
          size: "small",
          onClick: () => {

          },
        },
        { default: () => "详情" }
      );
    },
  },
]);
// 数据源
const dataSource = ref([
  {
    goodsNo: "1234561",
    goodsName: "矿泉水 550ml",
    goodsCode: "12421432143214321",
    price: 2,
    counts: 1,
    state: ["已上架"],
    total: 2,
  },
  {
    goodsNo: "1234561",
    goodsName: "矿泉水 550ml",
    goodsCode: "12421432143214321",
    price: 2,
    counts: 1,
    state: ["已下架"],
    total: 2,
  },
]);

export default {
  components: {
    NBreadcrumb,
    NBreadcrumbItem,
    NPageHeader,
    NCard,
    NDataTable,
    NTag,
    NButton,
  },
  setup() {
    /**
     * 响应式显示商品条码
     */
    window.onresize = () => {
      if (document.body.clientWidth <= 1285) {
        if (columns.length === 10) {
          // 删除商品条码 th
          columns.splice(2, 1);
        }
      } else {
        if (columns.length === 9) {
          // 复原商品条码 th
          columns.splice(2, 0, { title: "商品条码", key: "goodsCode" });
        }
      }
    };

    return {
      columns,
      dataSource,

    };
  },
};
</script>
<style>
/* Header */
.header {
  margin-top: 2px;
  padding: 20px;
  background-color: #fff;
}
.header h2 {
  margin: 5px 0;
  font-size: 18px;
}
.breadcrumb {
  padding: 0;
}
.breadcrumb .current-b a {
  color: black;
  text-decoration: none;
  font-size: 10px;
}
.breadcrumb .current-b a:hover,
.breadcrumb .default-b a:hover {
  color: #18a058;
}
.breadcrumb .default-b a {
  color: #949494;
  text-decoration: none;
  font-size: 10px;
}
/* Main */
main {
  padding: 24px;
}
.list__tablelist td,
.list__tablelist th {
  text-align: center !important;
}
</style>
